<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="docx文件预览" name="first">
      <div> docx文件预览</div>
      <!-- 按钮 -->
      <div class="operate-area">
        <div class="ant-radio-group"  @click="clickTab">
          <label :class=" tab1 == 0 ? 'ant-radio-button-wrapper ant-radio-button-wrapper-checked' : 'ant-radio-button-wrapper' " data-tab1="0">
            <span>远程文件地址</span>
          </label>
          <label  :class=" tab1 == 1 ? 'ant-radio-button-wrapper ant-radio-button-wrapper-checked' : 'ant-radio-button-wrapper' " data-tab1="1">
            <span>上传本地文件</span>
          </label>
        </div>
        <el-input v-show="tab1 == 0 " style="width: 600px; margin-left: 10px;"></el-input>
        <el-button v-show="tab1 == 0 " style="margin-left: 10px;" type="primary">预览</el-button>
        <!-- <el-button v-show="tab1 == 1 " style="margin-left: 10px;" >选择文件</el-button> -->
        <el-upload
            :limit="1"
            :file-list="fileList"
            accept=".docx"
            :beforeUpload="beforeUpload"
            action=""
        >
            <el-button size="small" type="warning">点击上传</el-button>
        </el-upload>
      </div>
      <div>
        <vueOfficeDocx :src="docx" style="height: 100vh;" @rendered="renderedHandler" @error="errorHandler" />
      </div>
    </el-tab-pane>
    <el-tab-pane label="excel文件预览" name="second">excel文件预览</el-tab-pane>
    <el-tab-pane label="pdf文件预览" name="third">pdf文件预览</el-tab-pane>
    <el-tab-pane label="pptx文件预览" name="fourth">pptx文件预览</el-tab-pane>
  </el-tabs>
</template>

<script setup>


//引入VueOfficeDocx组件
import vueOfficeDocx from "@vue-office/docx";
//引入VueOfficeExcel组件
import VueOfficeExcel from "@vue-office/excel";
//引入VueOfficePdf组件
import VueOfficePdf from "@vue-office/pdf";
import { ref, onMounted } from 'vue';
const activeName = ref('first')
const docx = ref('http://static.shanhuxueyuan.com/test6.docx') //设置文档网络地址，可以是相对地址
const renderedHandler = () => {
  console.log("渲染完成")
}
const errorHandler = () => {
  console.log("渲染失败")
}
// tab切换时触发
const handleClick = (tab, event) => {
  console.log(tab, event)
}
onMounted(() => {
  renderedHandler(),
    errorHandler()
})
const tab1 = ref('0')
// 按钮
const clickTab = (e) => {
  const label = e.target.closest('label');
  if (label) {
    const tabValue = label.getAttribute('data-tab1');
    if (tabValue) {
      tab1.value = tabValue;
    }
  }
}
// 点击上传
const src = ref('')
const fileList = ref([])
const beforeUpload = (file) => {
  let reader = new FileReader();
            reader.readAsArrayBuffer(file);
            reader.onload = (loadEvent) => {
                let arrayBuffer = loadEvent.target.result;
                docx.value = arrayBuffer
            };
            return false
}
</script>
<style lang="less">
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.operate-area {
  display: flex;
  margin: 10px;
  align-items: center;
  flex-wrap: wrap;

  .ant-radio-group {
    color: #000000d9;
    font-size: 14px;
    // display: inline-block;
    font-size: 0;
    .ant-radio-button-wrapper {
      position: relative;
      display: inline-block;
      height: 32px;
      margin: 0;
      padding: 0 15px;
      color: #000000d9;
      font-size: 14px;
      line-height: 30px;
      background: #fff;
      border: 1px solid #d9d9d9;
      border-top-width: 1.02px;
      // border-left-width: 0;
      cursor: pointer;
      transition: color .3s, background .3s, border-color .3s, box-shadow .3s;
      .ant-radio-button{

      }
    }
    .ant-radio-button-wrapper-checked{
      color: #fff;
      background: #40a9ff;
      border-color: #40a9ff;
    }
  }
}
</style>